<template>
  <div class="pufaBank">
    <Card>
      <div class="record" style="font-size: 14px;">
        <Row type="flex" justify="start" class="code-row-bg">
          <record-list v-for="(item,index) in recordData" :key="index" :item="item">
          </record-list>
        </Row>
      </div>
      <i-form :label-width="80">
        <Form-item v-for="(item,index) in transferList" :key="index" :label="item.lable">
          <i-input  readonly :value="item.value"></i-input>
        </Form-item>
      </i-form>
    </Card>
    <div style="height: 20px;"></div>
    <Card>
      <p slot="title">
        线下充值
      </p>
      <div class="record">
        <Row type="flex" justify="start" class="code-row-bg">
          <record-list v-for="(item,index) in recordData1" :key="index" :item="item">
          </record-list>
        </Row>
      </div>
      <i-form ref="form-validate" :model="formValidate" :rules="ruleValidate" :label-width="120">
        <Form-item label="充值银行" prop="bankname">
          <i-input  readonly v-model="formValidate.bankname"></i-input>
        </Form-item>
        <Form-item label="充值金额(元)" prop="money">
          <i-input  ref="inputValue" v-model="formValidate.money" number></i-input>
        </Form-item>
        <Form-item>
          <i-button :model="madelstatus" type="error"  @click="investBtn()">立即充值</i-button>
        </Form-item>
      </i-form>

      <Modal v-model="madelstatus" title="信息"
      @on-ok="ok" @on-cancel="cancel"
      class-name="vertical-center-modal"
      width="20"
      >
        <p class="font-14">充值金额：{{this.formValidate.money}}元，确定充值么</p>
      </Modal>
      <!-- 确定充值 -->
      <Modal v-model="modal2" class-name="vertical-center-modal"
      width="20">
              <p slot="header">
                  <span>创建完成</span>
              </p>
              <div style="text-align:center">
                  <p  class="font-14">订单已创建,充值审核结果查看线下交易记录</p>
              </div>
              <div slot="footer">
                  <Button type="primary" @click="close">确定</Button>
              </div>
          </Modal>
    </Card>
  </div>

</template>

<script>
  const validateMoney = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('金额不能为空'));
    }
    // 模拟异步验证效果
    setTimeout(() => {
      if (!Number.isInteger(value)) {
        callback(new Error('只能填写数字哦'));
      } else {
        callback();
      }
    }, 1000);
  };
  import RecordList from '@/components/record-list/record-list.vue';
  export default {
    name: 'pufa_bank_page',
    components: {
      RecordList
    },
    data() {
      return {
        madelstatus: false,
        modal2:false,
        inputvalue: '',
        transferList: [{
          lable: '收款人',
          value: '测试001'
        }, {
          lable: '收款账号',
          value: '111'
        }, {
          lable: '开户行',
          value: '浦发银行'
        }, {
          lable: '手续费',
          value: '3%'
        }],
        recordData: [{
          title: '对公转账（线下汇款）充值一般在一天以内到账，,请您耐心等待。 您可以在充值列表查询页面查看处理进度，如需帮助，可查看线下汇款常见问题。'
        }],
        recordData1: [{
            title: '代付金额：',
            num: this.$store.state.user.userInfo.paid_money,
            color: '#FD2424',
            unit: '元'
          },
          {
            title: '不可用代付金额：',
            num: this.$store.state.user.userInfo.un_paid_money,
            color: '#FD2424',
            unit: '元'
          }
        ],
        formValidate: {
          bankname: '浦发银行',
          money: ''
        },
        ruleValidate: {
          money: [{
            validator: validateMoney,
            trigger: 'change'
          }]
        },
      }
    },
    methods: {
      // 充值
      investBtn() {
        this.$refs['form-validate'].validate((valid) => {
          if (valid) {
            this.madelstatus = true
          }
        })
      },
      ok() {
        // console.log(this.formValidate.money)
        this.$refs['form-validate'].validate((valid) => {
          if (valid) {
            console.log(this.formValidate)
          }
        })
        this.modal2 =true;

      },
      cancel() {

      },
      close(){
        this.modal2 =false;
      }
    }
  }
</script>

<style lang="less">
  .pufaBank .ivu-form .ivu-form-item-label {
    font-size: 14px;
  }
  .vertical-center-modal{
          display: flex;
          align-items: center;
          justify-content: center;

          .ivu-modal{
              top: 0;
          }
      }
</style>
